<template>
  <!--轮播-->
  <div class="carousel_content padding88" >
    <!--<p>{{sliders[0].sliderImg}}</p>-->
    <!--<Carousel :value="0" loop  autoplay :autoplay-speed="8000" easing="fade">-->
    <!--<CarouselItem  v-for="(slider,index) in sliders" :key="index">-->
    <!--<div class="demo-carousel"  @click="go(slider.jumpType,slider.content,slider.moduleId,slider.sliderTitle)"><img :src="slider.sliderImg" alt="" ></div>-->
    <!--</CarouselItem>-->
    <!--</Carousel>-->
    <div class="slide-show" @mouseover="clearInv" @mouseout="runInv" ref="slide">
      <transition-group tag="ul" class='slide-ul' name="fade">
        <li v-for="(item,index) in sliders" :key="item.id" v-show="index===nowIndex" >
          <img :src="item.sliderImg" alt="" @click.stop="go(item.jumpType,item.content,item.moduleId,item.sliderTitle)" ref="slideImg">
        </li>
      </transition-group>
      <ul class="slide-pages" :style="{'margin-left':widths+'px'}" ref="pages">
        <li v-for="(item, index) in sliders"
            @click="goto(index)"
            :key="index"
            class="slide-page-point"
        >
          <a :class="{'active': index === nowIndex}"></a>
        </li>
      </ul>
      <div class="control-wrapper">
        <a class="prev" @click="goto(prevIndex)"></a>
        <a class="next" @click="goto(nextIndex)"></a>
      </div>
    </div>
  </div>
</template>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
  .slide-show{
    /*width: 100%;*/
    overflow: hidden;
    position: relative;
    height: 425px;
    max-width: 1920px;
    margin: auto;
  }
  /*@media screen and (max-width: 1200px) {
    .slide-show{
      height: 250px;
    }
  }*/
  @media screen and (max-width: 1300px) and (min-width: 1200px){
    .slide-show{
      height: 300px;
    }
  }
  @media screen and (max-width: 1400px) and (min-width: 1300px){
    .slide-show{
      height: 350px;
    }
  }
  @media screen and (max-width: 1500px) and (min-width: 1400px){
    .slide-show{
      height: 400px;
    }
  }
  .slide-pages {
    position: absolute;
    bottom: 25px;
    left: 50%;
    li {
      display: inline-block;
      a {
        width: 39px;
        height: 8px;
        background-color: rgba(255,255,255,0.8);
        display: block;
        margin: 0 5px;
        _zoom: 1;
        -webkit-transition: all .2s;
        transition: all .2s;
        &.active {
          background-color: #ffff00;
          opacity: 1;
        }
      }
    }
  }
  .control-wrapper {
    a {
      display: inline-block;
      position: absolute;
      top: 50%;
      width: 41px;
      height: 69px;
      transform: translateY(-50%);
    }
  }
  .prev {
    left: 0;
    background: url("http://c1.mifile.cn/f/i/2014/cn/icon/icon-slides.png") no-repeat -84px 50%;
    &:hover {
      background-position: 0 50%
    }
  }
  .next {
    right: 0;
    display: inline-block;
    background: url(//c1.mifile.cn/f/i/2014/cn/icon/icon-slides.png) no-repeat -125px 50%;
    &:hover {
      background-position: -42px 50%;
    }
  }
  .slide-show {
    position: relative;
    overflow: hidden;
  }
  .slide-ul {
    width: 100%;
    height: 100%;
    li {
      position: absolute;
      width: 100%;
      height: 100%;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .fade-enter-active, .fade-leave-active {
    transition: opacity .5s;
    opacity: 1;
  }
  .fade-enter, .fade-leave-active {
    opacity: 0
  }

</style>
<script type="text/ecmascript-6">
  import {slidersWeb,centreInfoWeb} from '../../http'
  import {getStore} from  '../../storage'
  export default {
    name: '',
    props: {},
    data() {
      return {
        sliders : [],
        nowIndex: 0,
        widths:'',
        // heights:''
      };
    },
    computed:{
      prevIndex () {
        if (this.nowIndex === 0) {
          return this.sliders.length - 1
        } else {
          return this.nowIndex - 1
        }
      },
      nextIndex () {
        if (this.nowIndex === this.sliders.length - 1) {
          return 0
        } else {
          return this.nowIndex + 1
        }
      }
    },
    methods: {
      //轮播图链接跳转
      go(jumpType,content,moduleId,sliderTitle){
        //pc只做链接跳转
        if(jumpType === 1){
          window.location.href = content;
        }
        /*else if(jumpType === 2){
          this.$router.push({
            name:'coursedetail',
            query:{
              courseId: moduleId,
            }
          })
        }else if(jumpType === 3){
          this.$router.push({
            name:'sliderhtml',
            query:{
              content:content,
              title:sliderTitle,
            }
          })
        }*/
      },
      goto (index) {
        this.nowIndex = index
      },
      runInv () {
        this.invId = setInterval(() => {
          this.goto(this.nextIndex)
        }, 3000)
      },
      clearInv () {
        clearInterval(this.invId)
      },
      getSliders(){
        //判断用户是否登录
        if(getStore('token') !== null && getStore('token') !== undefined && getStore('token') !== '') {
          //获取用户信息
          centreInfoWeb().then(res => {
            if (res.code === 200) {
              slidersWeb().then(res => {
                this.sliders = res.data.sliders;
                this.widths= -this.$refs.pages.offsetWidth / 2;
                // this.heights=this.$refs.slideImg[0].offsetHeight
              })
            } else {
              slidersWeb().then(res => {
                this.sliders = res.data.sliders;
                this.widths= -this.$refs.pages.offsetWidth / 2;
                // this.heights=this.$refs.slideImg[0].offsetHeight
              });
            }
          }).catch()
        }else {
          slidersWeb().then(res => {
            this.sliders = res.data.sliders;
            this.widths= -this.$refs.pages.offsetWidth / 2;
             // this.heights=this.$refs.slideImg[0].offsetHeight
          });
        }

      }
    },
    mounted () {
      //this.runInv();
      this.$nextTick(() => {
        this.getSliders()

      });

    },
    created() {
      this.getSliders()
    },
    components: {}
  }
</script>
